<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div class="root">
        <h1>今天天气很{{info}}</h1>
        <br>
        <button @click="change()">change</button>
        <h1>{{num.a}}</h1>
        <h1>{{num.b}}</h1>
        <br>
        <button v-on:click="add()">点我让a+1></button>
        <button v-on:click="add1()">点我让b+1></button>

    </div>

</body>
<script>
    let vm = new Vue({
        el: ".root",
        data: {
            weather: false,
            num: {
                a: 1,
                b: 2
            }
        },

        computed: {
            info: {
                get() {
                    return this.weather ? "晴" : "阴"
                }
            }
        },
        methods: {
            change() {
                this.weather = !this.weather
            },
            add() {
                console.log(this.num.a);

                return this.num.a++
            },
            add1() {
                console.log(this.num.b);

                return this.num.b++
            }

        },
        watch: {
            // info:{
            //     handler(oldvalue){
            //       alert(oldvalue)
            //     }
            // },
            // weather: {
            //     immediate: true,//初始化时让handler函数执行一次
            //     handler(oldvalue, newvalue) {
            //         console.log(oldvalue, newvalue)
            //     }
            // },
            // 简写形式：（不需要其他属性时，可以写成函数形式）
            // weather(oldvalue,newvalue){
            //     console.log(oldvalue,newvalue);
            // },
            "num.a": {
                handler() {
                    console.log("a改变了");

                }
            },
            "num": {
                deep: true,


            }

    // vm.$watch("weather",function(newvalue,oldvalue){
    //     console.log(newvalue,oldvalue);
    // }
    // )
</script>

</html>